<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挂号单管理</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style type="text/css">
        .el-form-item {
            display: inline-block !important;
            float: left;
            width: 400px;
        }

        .el-dialog__body {
            padding: 5px 30px;
        }
    </style>
</head>
<body>
<div id="div">
    <b style="font-size: 15px;">挂号信息管理</b>
    <div style="margin-top: 30px;margin-bottom: 20px;padding-left: 10px">
        <el-row>
            <el-col :span=5>
                身份证号:
                <el-input v-model="searchForm.idCard" size="mini" style="width: 180px"></el-input>
            </el-col>

            <el-col :span=4>
                就诊科室:
                <el-select v-model="searchForm.departmentId" placeholder="请选择" size="mini" style="width: 130px"
                           @change="selectDepartment()">
                    <el-option
                            v-for="item in departmentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span=4>
                挂号医师:
                <el-select v-model="searchForm.userId" placeholder="请选择" size="mini" style="width: 130px">
                    <el-option
                            v-for="item in docterList"
                            :key="item.id"
                            :label="item.userName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span=5>
                挂号单状态:
                <el-select v-model="searchForm.status" placeholder="请选择" size="mini" style="width: 130px">
                    <el-option
                            v-for="item in statusList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span=4>
                <el-button type="primary" @click="getRegistryListByPage()" size="mini" style="width: 100px">查询
                </el-button>
            </el-col>
        </el-row>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="id" label="挂号单编号" width="100">
        </el-table-column>
        <el-table-column prop="patient.name" label="病人姓名" width="100">
        </el-table-column>
        <el-table-column prop="patient.sex" :formatter="sexParse" label="性别" width="80">
        </el-table-column>
        <el-table-column prop="patient.idCard" label="身份证号" width="200">
        </el-table-column>
        <el-table-column prop="department.name" label="就诊科室" width="130">
        </el-table-column>
        <el-table-column prop="registryTime" label="挂号时间" width="170">
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="170">
        </el-table-column>
        <el-table-column prop="status" :formatter="statusParse" label="挂号单状态" width="170">
        </el-table-column>
        <el-table-column label="操作" width="120">
            <template slot-scope="scope">
                <el-button type="info" @click="detailRegistry(scope.$index, scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[4, 5, 8]"
            :page-size="pagination.pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
    <!--挂号单详情-->
    <el-dialog title="查看挂号信息" :visible.sync="dialogFormVisible" width="70%">
        <h4>病人信息</h4>
        <el-form :model="form" size="mini">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="form.idCard" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.sex" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-input v-model="form.birthday" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="家庭住址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off" disabled></el-input>
            </el-form-item>
            <hr class="input_width" style="width: 90%"/>
            <h4>挂号信息</h4>
            <el-form-item label="挂号单编号" :label-width="formLabelWidth">
                <el-input v-model="form.registryId" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="就诊科室" :label-width="formLabelWidth">
                <el-input v-model="form.departmentName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="就诊房间" :label-width="formLabelWidth">
                <el-input v-model="form.roomName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="挂号医师" :label-width="formLabelWidth">
                <el-input v-model="form.user.userName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="就诊时间" :label-width="formLabelWidth">
                <el-input v-model="form.consultationTime" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="挂号时间" :label-width="formLabelWidth">
                <el-input v-model="form.registryTime" autocomplete="off" disabled></el-input>
            </el-form-item>

            <hr class="input_width" style="width: 90%"/>
            <h4>医嘱信息</h4>
            <el-form-item label="病人主诉" style="width: 750px;clear:left;" :label-width="formLabelWidth">
                <el-input v-model="form.medivalAdvice.chiefComplaint" type="textarea" :rows="4" autocomplete="off"
                          disabled></el-input>
            </el-form-item>
            <el-form-item label="诊断结果" style="width: 750px;clear:left;" :label-width="formLabelWidth">
                <el-input v-model="form.medivalAdvice.diagnosis" type="textarea" :rows="4" autocomplete="off"
                          disabled></el-input>
            </el-form-item>
            <el-form-item label="就诊医师" :label-width="formLabelWidth">
                <el-input v-model="form.medivalAdvice.userName" autocomplete="off" disabled></el-input>
            </el-form-item>
        </el-form>
        <div style="height: 250px"></div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button type="primary" @click="dialogFormVisible = false" size="mini">关 闭</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                searchForm: {
                    departmentId: '',
                    patientId: '',
                    idCard: '',
                    userId: '',
                    status: ''
                },
                docterList: [],
                statusList: [
                    {id: 1, name: '已挂号，未问诊'},
                    {id: 2, name: '正在问诊'},
                    {id: 3, name: '结束问诊'}
                ],
                departmentList: [
                    {id: 1, name: '门诊内科'},
                    {id: 2, name: '门诊外科'},
                    {id: 3, name: '门诊儿科'},
                    {id: 4, name: '门诊眼科'},
                    {id: 5, name: '门诊口腔科'}
                ],
                tableData: [],
                pagination: {
                    currentPage: 1,
                    pageSize: 4,
                    total: 9
                },
                dialogFormVisible: false,
                form: {
                    registryId: '',
                    name: '',//病人姓名
                    idCard: '',//病人卡号
                    sex: 1,
                    birthday: '',
                    address: '',
                    departmentName: '',
                    roomName: '',
                    user: {    /*挂号医师*/
                        /* userId: 10,/!*就诊医师用户ID*!/
                         userName: '林医师',*/
                    },
                    consultationTime: '',
                    registryTime: '',
                    medivalAdvice: {
                        id: '', /*医嘱编号*/
                        registryId: '',/*挂号单表主键ID*/
                        userId: '',/*就诊医师用户ID*/
                        userName: '',
                        chiefComplaint: '', /*病人主诉*/
                        diagnosis: ''/*诊断情况*/
                    }
                },
                formLabelWidth: '120px'
            },
            mounted() {
                this.getRegistryListByPage();
            },
            methods: {
                selectDepartment() {
                    //清空排期医师列表
                    this.docterList = [];
                    let url = "userServlet";
                    let param = "method=getDocterList&departmentId=" + this.searchForm.departmentId;
                    axios.post(url, param).then(resp => {
                        if (resp.data.docterList) {
                            this.docterList = resp.data.docterList;
                        }
                    });
                },
                getRegistryListByPage() {
                    let url = "registryServlet";
                    let param = "method=getRegistryListByPage" +
                        "&currentPage=" + this.pagination.currentPage +
                        "&pageSize=" + this.pagination.pageSize +
                        "&departmentId=" + this.searchForm.departmentId +
                        "&idCard=" + this.searchForm.idCard +
                        "&userId=" + this.searchForm.userId +
                        "&status=" + this.searchForm.status;
                    axios.post(url, param).then(resp => {
                        this.tableData = resp.data.list;
                        this.pagination.total = resp.data.total;
                    });
                },
                detailRegistry(index, row) {
                    //清空原来数据
                    this.dialogFormVisible = true;
                    this.form.name = row.patient.name;
                    this.form.idCard = row.patient.idCard;
                    this.form.sex = row.patient.sex;
                    this.form.address = row.patient.address;
                    this.form.birthday = row.patient.birthday;
                    this.form.registryId = row.id;
                    this.form.departmentName = row.department.name;
                    this.form.roomName = row.room.name;
                    this.form.user = row.user;
                    this.form.consultationTime = row.consultationTime;
                    this.form.registryTime = row.registryTime;

                    //this.form.medivalAdvice=null;
                    //查询医嘱表
                    let url = "medicalAdviceServlet";
                    let param = "method=getMedicalAdviceByRegistryId" +
                        "&registryId=" + this.form.registryId;
                    axios.post(url, param).then(resp => {
                        if (resp.data.medivalAdvice) {
                            this.form.medivalAdvice = resp.data.medivalAdvice;
                        } else {
                            this.form.medivalAdvice.chiefComplaint = '';
                            this.form.medivalAdvice.diagnosis = '';
                            this.form.medivalAdvice.id = '';
                            this.form.medivalAdvice.registryId = this.form.registryId;
                            this.form.medivalAdvice.userId = '';
                            this.form.medivalAdvice.userName = '';
                        }
                    });
                },
                sexParse(row, column, cellValue) {
                    let str = '';
                    switch (cellValue) {
                        case 1:
                            str = "男";
                            break;
                        case 2:
                            str = "女";
                            break;
                    }
                    return str;
                },
                statusParse(row, column, cellValue) {
                    let str = '';
                    switch (cellValue) {
                        case 1:
                            str = "已挂号，未问诊";
                            break;
                        case 2:
                            str = "正在问诊";
                            break;
                        case 3:
                            str = "问诊结束";
                            break;
                    }
                    return str;
                },
                //功能：改变查询每页显示的条数，pagination组件会自动传递选择的pageSize
                handleSizeChange(pageSize) {
                    this.pagination.pageSize = pageSize;
                    this.getRegistryListByPage();

                },
                //功能：翻页查询，pagination组件会自动传递当前页号currentPage
                handleCurrentChange(currentPage) {
                    this.pagination.currentPage = currentPage;
                    this.getRegistryListByPage();
                }
            }
        }
    );
</script>
</html>